<template>
  <div class="layout-pd" style="background-color: #ffffff;">
    <el-page-header @back="goBack" title="返回" content="服务编排设计器" style="padding-bottom:10px">
      <template #content>
        <div class="flex items-center" >
          <span class="text-large font-600 " style="padding-right:5px">服务编排设计器</span>
          <SvgIcon name="basefont icon-title" />
          <span class="text-sm " style="color: var(--el-text-color-regular)">
             {{state.funcTitle+'('+state.funcCode+')'}}
          </span>
        </div>
      </template>
      <template #extra>
        <div class="flex items-center" style="margin-top:5px;margin-right:20px">
          <el-button icon="ele-Refresh" >重置</el-button>
          <el-button type="primary" icon="ele-CircleCheck" @click="saveOrUpdateChain">保存</el-button>
        </div>
      </template>
    </el-page-header>
    <div class="designer-wrap" >
      <div class="designer-content-box" :style="{ height: 'calc(100vh - 50px)' }">
      <div class="flow-design-wrap">
        <div id="flow-design" class="flow-design-container" :style="zoomStyle">
          <div id="flow-design-content" class="flow-design-content">
            <ServiceStartNode :node="nodeData"  />
            <ServiceNode  :node="nodeData"  />
            <ServiceEndNode :node="nodeData"  />
          </div>
        </div>
        <ServiceZoom v-model="state.zoomValue" />
      </div>
    </div>
    </div>

  </div>
</template>
<script lang="ts" setup name="ApiDesign">
  import ServiceStartNode from './components/start/index.vue';
  import ServiceEndNode from './components/end/index.vue';
  import ServiceNode from './components/node/index.vue';
  import ServiceZoom from './components/common/ServiceZoom.vue';
  import mittBus from '@/utils/mitt';

  const route = useRoute();
  //---------------内部变量定义----------------------------------
  const state=reactive({
    zoomValue: 100,
    nodeFlag:true,
    funcCode: String,
    funcTitle: String,
    navable: {
      type: Boolean,
      default: true,
    },
    chainId:String,
    serviceName:String,
  });
  const zoomStyle = computed(() => {
    let zoom=state.zoomValue / 100;
			return {zoom: zoom}
	});
  const nodeData = ref()
  watch(
    () => $store.serviceFlow.node,
    (val: any) => {
      nodeData.value=val
    },
    {
      deep: true,
    }
  );
  //------------------内部方法定义--------------------------------------
  const goBack = () => {
    // 1、关闭当前 tagsView
    closeCurrentTagsView()
  }
  const closeCurrentTagsView = () => {
    const params = { contextMenuClickId: 1, ...route };
    mittBus.emit("onCurrentContextmenuClick", Object.assign({}, params));
    
  };

  // 页面加载时
  onMounted(() => {
    $store.serviceFlow.funcCodeMap=[]
    // 参数：query: { "id": "111", "name": "vue-next-admin" }
    state.funcCode=route.query.funcCode;
    state.funcTitle=route.query.funcTitle;
    state.chainId=route.query.chainId;
    state.serviceName=route.query.serviceName;

    $store.serviceFlow.SET_CHAINID(state.chainId);
    $api.common.send.post('LITEFLOWNODE0007', {liteflowChainId:state.chainId})
    .then((res)=>{
      if(res.result==null){
        $store.serviceFlow.ADD_FUNC(state.funcCode,state.funcTitle);
      }else{
        let funcList =res.result;
        if(funcList.length>0){
          for(let i=0; i<funcList.length; i++){
            $store.serviceFlow.ADD_FUNC(funcList[i].liteflowNodeCode,funcList[i].liteflowNodeTitle);
          }
        }else{
          $store.serviceFlow.ADD_FUNC(state.funcCode,state.funcTitle);
        }
      }
    }).catch(() => {

    });

    //根据chainId获取原有json数据加载设计图,若没有则新增
    $api.common.send.post('LITEFLOWCHAIN0002', {liteflowChainId:state.chainId})
    .then((res) => {
      if(res.result.liteflowChainJson){
        $store.serviceFlow.SET_NODE(JSON.parse(res.result.liteflowChainJson))
      }else{
        //初始化节点信息
        $store.serviceFlow.SET_NODE({funcCode:state.funcCode,funcTitle:state.funcTitle,
          type: 0,
          // 流程节点状态(用于只读模式, 0:未进行 1:进行中  2:已完成)status: -1,
          // 是否有错误
          error: false,
          // 子节点
          childNode: null,
          // 显示添加按钮
          addable: true,
        })
      }

    })
    .catch(() => {

    });

  });
  function saveOrUpdateChain(){
    let liteflowChainJson= JSON.stringify(nodeData.value);
    let params={
      "liteflowChainId":state.chainId,
      "liteflowApplicationName":state.serviceName,
      "liteflowChainName":state.funcCode,
      "liteflowChainDesc":state.funcTitle,
      "liteflowChainJson":liteflowChainJson
    }
    $api.common.send.post('LITEFLOWCHAIN0004',params)
    .then((res) => {
      if(!state.chainId){
        state.chainId=res.result.liteflowChainId;
        $store.serviceFlow.SET_CHAINID(state.chainId);
      }
      $api.common.send.post('LITEFLOWCENTER0002',params);
      const params2: any = {};
      if (state.funcCode) {
        params2.funcId = state.funcCode;
      }
      setTimeout(() => {
        $api.common.send.post('function0009',params2)
            .then(() => {

            })
            .catch(() => {
            });
      }, 100);
    })
    .catch(() => {

    });
  }


</script>
<style lang="scss">

</style>
